<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转移列表中的元素</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <style>
        .station-leave-active, .station-enter-active {
            transition: all 2s;
        }

        .station-leave-active {
            position: absolute;
            opacity: 0;
            transform: translateX(-30px);
        }

        .station-enter {
            opacity: 0;
            transform: translateX(30px);
        }

        .station-move {
            transition: 2s;
        }

        span {
            display: inline-block;
            margin: 3px;
            transition: transform 2s;
        }
    </style>
</head>
<body>

<div id="app">
    <h3>Bus站模拟器</h3>
    <transition-group tag="p" name="station">
        <span v-for="bus in buses" :key="bus">🚌</span>
    </transition-group>
    {{buses}}
</div>


<script>
    new Vue({
        el: '#app',
        data: {
            buses: [1, 2, 3, 4, 5],
            nextBus: 6
        },
        mounted() {
            setInterval(() => {
                const headOrTail = () => Math.random() >= 0.5;
                if (headOrTail()) {
                    this.buses.push(this.nextBus)
                    this.nextBus += 1
                } else {
                    this.buses.splice(0, 1)
            }
        },2000)
        }
    })
</script>

</body>
</html>